<template>
  <view class="addfirend">
    <view class="top">
      <span class="back" @click="back">
        <image src="../../static/images/common/back.png" mode=""></image>
      </span>
      <span class="title">好友请求</span>
    </view>
    <view class="main">
      <view class="request-list">
        <view class="request-list-item" v-for="(item,index) in info.reqFriendlist" :key="index">
          <view class="up">
            <button type='warn' size="mini" @click="refuse(item.id)">拒绝</button>
            <view class="up-center">
              <view class="pic">
                <image :src="item.imgurl" mode=""></image>
              </view>
              <view class="name">
                <span>{{ item.username }}</span>
              </view>
              <view class="request-time">
                <span>{{ formatSignTime(item.lastTime) }}</span>
              </view>
            </view>
            <button type='primary' size="mini" @click="agree(item.id)">同意</button>
          </view>
          <view class="down">
            <view class="text">
              留言:<span>{{ item.liuyan }}</span>
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    getCurrentInstance
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    formatSignTime
  } from '@/utils/formatDate'
  import {
    requestNet
  } from '@/api/base.js'
  import {
    useUserStore
  } from '@/store/user.js'
  const user = useUserStore() //创建仓库
  const instance = getCurrentInstance()
  const info = reactive({
    userid: null, //当前登录的用户id
    token: '',
    reqFriendlist: [], //申请添加好友的用户的列表
    userAvater: '',
    userName: '额说法色粉',
    requestTime: new Date(),
  })

  function back() {
    uni.navigateBack({
      delta: 1
    })
  }

  //获取申请好友的列表
  function getFriendReq() {
    requestNet({
      url: '/home/getUserList',
      data: {
        uid: info.userid,
        state: 1
      },
      header: {
        token: info.token
      }
    }).then(res => {
      // console.log(res)
      let code = res.data.code
      if (code == 200) {
        info.reqFriendlist = res.data.data
        let temp = info.reqFriendlist
        for (let i = 0; i < temp.length; i++) {
          if (!temp[i].imgurl.includes(instance.proxy.serverUrl)) { //不包含服务器地址
            info.reqFriendlist[i].imgurl = `${instance.proxy.serverUrl}${temp[i].imgurl}`
          }
          getAddFriendMsg(temp[i], i)
        }
      }
    }).catch(err => {
      uni.showToast({
        title: err,
        icon: 'error'
      })
    })
  }

  //获取用户申请时的留言信息
  function getAddFriendMsg(arr, i) {
    requestNet({
      url: '/home/getLastMsg',
      data: {
        uid: info.userid,
        fid: arr.id
      },
      header: {
        token: info.token
      }
    }).then(res => {
      // console.log(res)
      let code = res.data.code
      let result = res.data.data
      if (code == 200) {
        info.reqFriendlist[i].liuyan = result.message
      }
    }, err => console.log(err))
  }

  //拒绝好友申请  传入要删除用户|拒绝好友的id
  function refuse(id) {
    requestNet({
      url: '/add/deleteFriend',
      method: 'POST',
      data: {
        uid: info.userid,
        fid: id
      },
      header: {
        token: info.token
      }
    }).then(res => {
      console.log(res)
      let code = res.data.code
      if (code == 200) {
        let reqFri = info.reqFriendlist
        for (let i = 0; i < reqFri.length; i++) {
          if (reqFri[i].id == id) info.reqFriendlist.splice(i, 1)
        }
      }
    }, err => console.log(err))
  }
  //同意好友申请
  function agree(id) {
    requestNet({
      url: '/add/agreeFriend',
      method: 'POST',
      data: {
        uid: info.userid,
        fid: id
      },
      header: {
        token: info.token
      }
    }).then(res => {
      console.log(res)
      let code = res.data.code
      if (code == 200) {
        let reqFri = info.reqFriendlist
        for (let i = 0; i < reqFri.length; i++) {
          if (reqFri[i].id == id) info.reqFriendlist.splice(i, 1)
        }
      }
    }, err => console.log(err))
  }
  //获取缓存数据
  function getStorage() {
    if (Object.keys(user.userinfo).length != 0) { //如果有数据，登录过了
      info.userid = user.userinfo.userid
      //info.userAvater = user.userinfo.imgurl
      info.token = user.token
    } else { //否则跳转到登录页面
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }

  onLoad((e) => {
    getStorage() //获取登录用户数据
    getFriendReq() //获取申请好友的列表
  })
</script>

<style lang="scss" scoped>
  .addfirend {
    padding: 0 20rpx;
    // height: calc(100% - 3.5714rem);

    padding-bottom: 128rpx;

    .top {
      position: relative;
      display: flex;
      align-items: center;
      height: 88rpx;
      border-bottom: 2rpx solid var(--text-color-grey);

      .back {
        display: inline-block;
        height: 40rpx;
        width: 40rpx;

        image {
          height: 90%;
          width: 90%;
        }
      }

      .title {
        position: absolute;
        //居中显示
        transform: translateX(-50%);
        left: 50%;
        font-size: 36rpx;
      }
    }

    .main {
      .request-list {
        margin-top: 1.0714rem;

        &-item {
          height: 14.2857rem;
          box-shadow: .0714rem 1.7143rem 4.5714rem -0.5714rem rgba(0, 0, 0, 0.2);

          .up {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-top: .3571rem;

            &-center {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              .pic {
                height: 4.2857rem;
                width: 4.2857rem;
                margin-bottom: .7143rem;

                image {
                  border-radius: 50%;
                  width: 100%;
                  height: 100%;
                }
              }

              .name {
                margin-bottom: .3571rem;

                span {
                  font-weight: 700;
                  font-size: 1.0714rem;
                }
              }

              .request-time {
                font-size: .8571rem;
                color: var(--text-color-placeholder);
              }
            }
          }

          .down {
            margin-top: .5714rem;
            padding: 0 .7143rem;

            .text {
              padding: 1.0714rem;
              border-radius: .7143rem;
              background: var(--bg-color-grey);
            }
          }
        }
      }
    }
  }
</style>
